/*
注意, 直接导入 tailwindcss 会有一套默认样式
由于项目设置了一套 reset 默认样式, 需要禁用掉 tailwindcss 的默认样式, 避免样式不符合预期
禁用预检: https://tailwind.nodejs.cn/docs/preflight#disabling-preflight
*/

/* fix[css] 不放置在层中避免权重过低 */
/* @import "tailwindcss/theme.css" layer(theme); */
/* @import "tailwindcss/utilities.css" layer(utilities); */

@import "tailwindcss/theme.css";
@import "tailwindcss/utilities.css";

@plugin "@iconify/tailwind4";

@custom-variant dark (&:is(.dark *));

@theme {
  --color-bg_color: var(--el-bg-color);
  --color-primary: var(--el-color-primary);
  --color-text_color_primary: var(--el-text-color-primary);
  --color-text_color_regular: var(--el-text-color-regular);
}

/* Note[css] @layer https://developer.mozilla.org/zh-CN/docs/Web/CSS/@layer */
/* dark-bg-hover 暗色模式下 bg hover */
/* bg-rounded-base 添加上背景, 主要用于暗色模式下一些 element-plus 组件是透明的背景 */
@layer utilities {
    .dark-bg-hover {
		@apply dark:text-white dark:hover:!bg-(--enco-dark-bg-hover);
	}

    .bg-rounded-base {

        @apply bg-(--el-bg-color) rounded-(--el-border-radius-base);
    }

	.flex-center {
		@apply flex justify-center items-center;
	}

    .flex-between {
        @apply flex justify-between;
    }

    .flex-between-c {
		@apply flex justify-between items-center;
	}

    .flex-around {
        @apply flex justify-around;
    }

    .flex-around-c {
		@apply flex justify-around items-center;
	}

    .flex-start-c {
		@apply flex justify-start items-center;
	}

    .flex-end {
        @apply flex justify-end;
    }

    .flex-end-c {
        @apply flex justify-end items-center;
    }
}
